<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="400" height="400"></canvas>

    <script>
    let el = document.getElementsByTagName("canvas");

        let ctx = el[0].getContext("2d");

        ctx.setLineDash([20,20]);
        // ctx.moveTo(0, 0);
        // ctx.lineTo(100,100);
        // ctx.stroke();

        var offset = 0;

        function render(){
            // 清掉旧的东西
            ctx.clearRect(0 ,0 , 200, 200)
            // 设置位移
            ctx.lineDashOffset = offset ;
            ctx.rect( 50 ,50 , 150, 150 );
            ctx.stroke();
        }

        setInterval( function(){
            offset += 1;
            render();

        }, 20);
    </script>
</body>
</html>